<template>
    <div id="articleList">
        <div >
            <ul>
                <li v-for="item in articleList"  style="list-style:none;">
                   <el-row>
                        <div style="text-align:left;margin-top:10px">
                            <router-link :to="'/myBlogDetailShow/'+item.id" style="text-decoration: none;color:black" class="myBlogList">
                                <span style="padding:3px;font-weight:bold;font-size:18px;">{{item.title}}</span>
                            </router-link>
                        </div>

                        <div style="float:left;margin-top:10px">
                            <img src="../assets/head.jpg" alt="" width="30px" style="border-radius:50px;vertical-align:middle;" > <!--头像图标-->
                            <span style="margin-left:10px;">{{item.username}}</span>
                        </div>

                        <div style="float:right;margin-top:10px">
                            <div style="float:left;margin-left:10px">
                                 <i class="layui-icon layui-icon-praise" style="font-size: 15px; color: #1E9FFF;"></i> {{item.praiseNum}}
                            </div>

                            <div style="float:left;margin-left:10px">
                                 <i class="layui-icon layui-icon-tread" style="font-size: 15px; color: #1E9FFF;"></i> {{item.praiseDownNum}}
                            </div>
                           
                            <div style="float:left;margin-left:10px">
                                <v-svg ></v-svg>
                            </div>
                            <span>123</span>
                            <router-link :to="'/myBlogDetailShow/'+item.id" style="text-decoration: none;color:#6EC5F6;margin-left:10px;font-size:15px；" class="myBlogList">
                                <span style="padding:3px;font-weight:bold;font-size:15px；">评论</span>
                            </router-link>
                        </div>
                    </el-row>
                        <hr style="color:#F3F3F3"/>
                </li>
            </ul>
        </div>

        
    </div>
</template>
<script>
import svg from './common/svg.vue';
export default {
    data(){
        return{
            'articleTypeName':'',
            'articleList':[]
        }
    },
    components:{
        'v-svg':svg
    },
    methods:{
        getArticleListWithType(){
            this.axios.get('/article/getArticleListWithType/'+this.articleTypeName).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                   console.log(response.data.data)
                   this.articleList = response.data.data;
                }
            }).catch(error => {
               this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });
        }
    },
    beforeRouteUpdate( to, from, next ){
        this.articleTypeName = to.params.articleTypeName;
        this.getArticleListWithType();
        next();
    },
    mounted(){
        this.articleTypeName =this.$route.params.articleTypeName;
        this.getArticleListWithType();
    }
}
</script>